<template>
  <section class="notice box">
    <div class="swiper-box2">
      <img src="../../assets/imgs/notice.png" />
      <div class="mySwiper van-swipe">
        <div class="van-swipe__track" >
          <div class="item" @click="goDetail">
            <span class="txt">【独角兽-财富之星】</span>
          </div>
        </div>
      </div>
      <van-icon name="wap-nav" @click="goList" />
    </div>
  </section>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const goDetail = () => {
  router.push({
    path: '/noticeDetails'
  })
}

const goList = () => {
  router.push({
    path: '/noticeList'
  })
}
</script>

<style scoped lang='scss'>
.notice {
  margin-top: -10rem;
  position: relative;
  .swiper-box2 {
    padding: 0.625rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    img {
      width: 2rem;
    }
    .mySwiper {
      flex: 1;
      min-width: 0;
      margin-right: 0.625rem;
      height: 1.5625rem;
    }
    .van-swipe {
      position: relative;
      overflow: hidden;
      transform: translateZ(0);
      cursor: grab;
      user-select: none;
    }
    .van-swipe__track {
      display: flex;
      flex-direction: column;
      transition-duration: 0ms; 
      transform: translateY(0px);
      .item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        height: 1.5625rem;
        position: relative;
        height: 1.5625rem;
      }
    }
    .txt {
      flex: 1;
      min-width: 0;
      margin: 0 0.625rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .van-icon {
      font-size: 0.9375rem;
    }
  }
}
</style>